import 'xy-ui/components/xy-popover.js';

class AOption extends HTMLElement {
  static get observedAttributes() { return ["value", "selected","disabled"]; }
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `<div id="option"><slot></slot></div>`
  }
  connectedCallback() {
    this.option = this.shadowRoot.getElementById('option');
  }
  focus() {
    this.option.focus();
  }
  get value() {
    return this.getAttribute('value');
  }

  get disabled() {
    return this.getAttribute('disabled')!==null;
  }

  set disabled(value) {
    if (value === null || value === false) {
      this.removeAttribute('disabled');
    } else {
      this.setAttribute('disabled', '');
    }
  }
}

customElements.define('a-option', AOption)


class ASelect extends HTMLElement {
  static get observedAttributes() { return ["value", "disabled"]; }
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
<xy-popover id="root">
  <button :disabled="${this.disabled}" id="select"><div id="value"></div></button>
  <xy-popcon id="options">
    <slot id="slot"></slot>
  </xy-popcon>
</xy-popover>
    `
  }
  connectedCallback() {
    this.form = this.closest('xy-form');
    this.root = this.shadowRoot.getElementById('root');
    this.select = this.shadowRoot.getElementById('select');
    this.options = this.shadowRoot.getElementById('options');
    this.slots = this.shadowRoot.getElementById('slot');
    this.txt = this.shadowRoot.getElementById('value');
    this.tip = this.shadowRoot.getElementById('tip');
    this.focusIndex = -1;
    this.options.addEventListener('click',(ev)=>{
      this.focus();
      const item = ev.target.closest('a-option');
      if(item){
        this.nativeclick = true;
        this.value = item.value;
      }
    })
    this.slots.addEventListener('slotchange', () => {
      this.nodes = [...this.querySelectorAll(`a-option:not([disabled])`)];
      if (!this.defaultvalue) {
        this.value = '';
      } else {
        this.value = this.defaultvalue;
      }
      this.init = true;
    });
  }
  focus() {
    this.select.focus();
  }
  get value() {
    return this.$value||'';
  }

  get text() {
    return this.$text||this.placeholder;
  }

  get placeholder() {
    return this.getAttribute('placeholder')||'请选择';
  }


  set disabled(value) {
    if (value === null || value === false) {
      this.removeAttribute('disabled');
    } else {
      this.setAttribute('disabled', '');
    }
  }
  set value(value) {
    if (!this.nodes) {
      return
    }
    if(value === ''){
      this.$value = '';
      this.$text = this.placeholder;
      if(this.focusIndex>=0){
        const current = this.nodes[this.focusIndex];
        if(current){
          this.focusIndex = -1;
          current.selected = false;
          current.focusin = false;
        }
      }
      this.txt.textContent = this.placeholder;
      return
    }
    if (value !== this.value) {
      this.$value = value;
      const pre = this.querySelector(`a-option[selected]`);
      if(pre){
        pre.selected = false;
        pre.focusin = false;
      }
      const cur = this.querySelector(`a-option[value="${value}"]`)||this.querySelector(`a-option`);
      this.focusIndex = this.nodes.indexOf(cur);
      cur.selected = true;
      cur.focusin = true;
      this.$text = cur.textContent;
      this.txt.textContent = this.$text;
      if(this.nativeclick){
        this.nativeclick = false;
        // this.checkValidity();
        // console.log('sdsdsds', value)
        this.dispatchEvent(new CustomEvent('change', {
          detail: {
            value: value,
            text: this.$text
          }
        }));
      }
    }
    this.options.open = false;
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'disabled' && this.select) {
      if (newValue != null) {
        this.select.disabled = true;
      } else {
        this.select.disabled = false;
      }
    }
    if (name === 'value') {
      // console.log('set v', newValue)
      this.value  = newValue
    }
  }
}

customElements.define('a-select', ASelect)
